<template>
  <view>
    <!-- 用户信息 -->
    <view class="userinfo">
      <template v-if="token">
        <!-- 头像模糊背景 -->
        <image class="avatar-bg" :src="avatar || defaultSrc" mode="aspectFill" />
        <!-- 头像 -->
        <view class="avatar">
          <image
            class="img-avatar"
            :src="avatar || defaultSrc"
            mode="aspectFill"
          />
          <button
            class="btn-avatar"
            open-type="chooseAvatar"
            @chooseavatar="Avatar"
          >
            获取头像
          </button>
        </view>

        <!-- 昵称 -->
        <input :value="'用户昵称'" class="nickname" type="nickname" />
      </template>
      <template v-else>
        <button @click="login" type="primary">用户登录</button>
      </template>
    </view>
    <!-- 订单导航 -->
    <view class="nav">
      <view class="nav-item" v-for="item in nav" :key="item.type">
        <u-icon size="50rpx" :name="item.icon"></u-icon>
        <text class="nav-text">{{ item.title }}</text>
      </view>
    </view>
    <!-- 单元格 -->
    <view class="cell">
      <u-cell-group :border="false">
        <u-cell icon="kefu-ermai" value="10086">
          <view class="cell-title" slot="title">
            联系客服
            <button class="cell-button" open-type="contact">客服按钮</button>
          </view>
        </u-cell>
        <u-cell icon="edit-pen">
          <view class="cell-title" slot="title">
            意见反馈
            <button class="cell-button" open-type="feedback">反馈按钮</button>
          </view>
        </u-cell>
        <u-cell icon="setting">
          <view class="cell-title" slot="title">
            系统设置
            <button class="cell-button" open-type="openSetting">设置</button>
          </view>
        </u-cell>
        <u-cell icon="info-circle" value="v1.0.0">
          <view class="cell-title" slot="title">当前版本</view>
        </u-cell>
      </u-cell-group>
      <button type="warn" plain>退出登录</button>
    </view>
  </view>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data() {
    return {
      // 默认图片地址
      avatar:'',
      defaultSrc:
        "https://img0.baidu.com/it/u=324754129,1809452373&fm=253&fmt=auto&app=138&f=JPEG?w=529&h=500",
      nav: [
        { type: 1, icon: "order", title: "全部订单" },
        { type: 2, icon: "rmb-circle", title: "待付款" },
        { type: 3, icon: "car", title: "待收货" },
        { type: 4, icon: "reload", title: "退货/退款" },
      ]
    };
  },
  computed:{
    ...mapState('user',['token'])
  },
  methods:{
    Avatar(e){
      this.avatar = e.detail.avatarUrl
    }
  },
  methods:{
    async login(){
      // 登录流程
      // 1 调用wx.getUserInfo()和wx.login() 获取五个参数
      // 2 发请求给后端服务器
      // 3. 后端服务器会和微信服务器进行交流, 把登录流程走完
      // 4. 成功后会返回一个 token 给我们
      const {rawData,iv,signature,encryptedData}= await uni.getUserInfo()
      const {code} =await uni.login()
      const {message} = await uni.$u.http.post('/users/wxlogin',{rawData,iv,signature,encryptedData,code})
      if(!message)return uni.showToast({
        title: '登录失败',
        icon: 'error',
      })
      this.$store.commit('user/updateToken',message.token)
    },
  }
};
</script>

<style lang="scss">
// 页面背景
page {
  background-color: #f9f9f9;
}
// 用户信息
.userinfo {
  height: 330rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .avatar-bg {
    width: 120%;
    height: 120%;
    position: absolute;
    // 滤镜: 模糊
    filter: blur(30rpx);
    left: -10%;
    top: -10%;
  }
  .avatar {
    position: relative;
    border-radius: 50%;
    width: 172rpx;
    height: 172rpx;
    .img-avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .btn-avatar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
    }
  }
  .nickname {
    color: #fff;
    margin-top: 20rpx;
    text-shadow: 2rpx 2rpx 10rpx #333;
    text-align: center;
  }
}

// 导航列表
.nav {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 15rpx;
  height: 144rpx;
  display: flex;
  justify-content: space-around;
  .nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .nav-text {
      font-size: 26rpx;
      margin-top: 16rpx;
      color: #474747;
    }
  }
}

// 单元格
.cell {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 15rpx;
  height: 520rpx;
  .cell-title {
    position: relative;
    .cell-button {
      // 透明度为 0
      opacity: 0;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }
}
</style>